<template>
    <div class="top">
        <div class="left">
            <span class="btnL" @click="goHome">首页</span>
        </div>
        <div class="center">
            <span class="title"> 智慧旅游可视化大屏</span>
        </div>
        <div class="right">
            <span class="btnR">统计报告</span>
            <span class="time">当前时间2023年5月3日11:58:57</span>
        </div>
    </div>
</template>
<script setup name='top'>
     import { useRouter } from 'vue-router'
     let $router=useRouter()
const goHome=()=>{
    $router.push('/')
}

</script>
<style scoped lang='scss'>
    .top {
        display: flex;

        .left {
            flex: 1;
            background: url(../../images/dataScreen-header-left-bg.png) no-repeat;
            background-size: cover;
            position: relative;
height: 40px;
            .btnL {
                width: 150px;
                height: 40px;
                position: absolute;
                right: 0;
                background: url(../../images/dataScreen-header-btn-bg-l.png) no-repeat;
                background-size: 100% 100%;
                text-align: center;
                line-height: 40px;
                color: #29fcff;
                font-size: 20px;
            }
        }

        .center {
            flex: 2;
            height: 74px;
            background: url(../../images/dataScreen-header-center-bg.png) no-repeat;
            background-size: cover;

            .title {
                display: block;
                text-align: center;
                line-height: 74px;
                font-size: 40px;
                color: skyblue;
                letter-spacing: 5px;
            }
        }

        .right {
            height: 40px;
            flex: 1;
            background: url(../../images/dataScreen-header-right-bg.png) no-repeat;
            background-size: cover;
            position: relative;
            display: flex;
            justify-content: space-between;

            .btnR {
                display: block;
                width: 150px;
                height: 40px;

                background: url(../../images/dataScreen-header-btn-bg-r.png) no-repeat;
                background-size: 100% 100%;
                text-align: center;
                line-height: 40px;
                color: #29fcff;
                font-size: 20px;
            }

            .time {
                color: azure;
                line-height:40px;
            }
        }
    }
</style>